<template>
  <div class="production-bom-page">
    <el-row :gutter="20">
      <el-col :span="8">
        <el-card class="product-card">
          <template #header>
            <div class="card-header">
              <span>商品列表</span>
              <el-button type="primary" @click="handleAdd" v-if="hasPerm('production:bom:add')">新增BOM</el-button>
            </div>
          </template>
          
          <el-table :data="productList" style="width: 100%" @row-click="handleProductSelect">
            <el-table-column prop="productCode" label="商品编码" width="100" />
            <el-table-column prop="productName" label="商品名称" />
            <el-table-column prop="specification" label="规格" width="80" />
          </el-table>
        </el-card>
      </el-col>
      
      <el-col :span="16">
        <el-card class="detail-card">
          <template #header>
            <div class="card-header">
              <span>BOM详情</span>
              <div v-if="selectedProduct">
                <el-button type="primary" @click="handleEdit" v-if="hasPerm('production:bom:edit')">编辑</el-button>
                <el-button type="danger" @click="handleDelete" v-if="hasPerm('production:bom:delete')">删除</el-button>
              </div>
            </div>
          </template>
          
          <div v-if="selectedProduct" class="bom-detail">
            <el-descriptions :column="2" border>
              <el-descriptions-item label="商品编码">{{ selectedProduct.productCode }}</el-descriptions-item>
              <el-descriptions-item label="商品名称">{{ selectedProduct.productName }}</el-descriptions-item>
              <el-descriptions-item label="规格">{{ selectedProduct.specification }}</el-descriptions-item>
              <el-descriptions-item label="单位">{{ selectedProduct.unit }}</el-descriptions-item>
            </el-descriptions>
            
            <div class="bom-components" v-if="bomComponents.length > 0">
              <h4>BOM组件</h4>
              <el-table :data="bomComponents" style="width: 100%">
                <el-table-column prop="componentCode" label="组件编码" width="120" />
                <el-table-column prop="componentName" label="组件名称" width="150" />
                <el-table-column prop="quantity" label="用量" width="80" />
                <el-table-column prop="unit" label="单位" width="80" />
                <el-table-column prop="process" label="工序" />
              </el-table>
            </div>
            
            <div class="bom-logistics" v-if="logisticsInfo.length > 0">
              <h4>物流信息</h4>
              <el-table :data="logisticsInfo" style="width: 100%">
                <el-table-column prop="logisticsCode" label="物流编码" width="120" />
                <el-table-column prop="logisticsName" label="物流名称" width="150" />
                <el-table-column prop="status" label="状态" width="100" />
                <el-table-column prop="description" label="描述" />
              </el-table>
            </div>
          </div>
          
          <div v-else class="no-selection">
            <el-empty description="请选择左侧商品查看BOM详情" />
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { hasPerm } from '@/utils/permission'
import { ElMessage } from 'element-plus'

const productList = ref([])
const selectedProduct = ref(null)
const bomComponents = ref([])
const logisticsInfo = ref([])

const handleAdd = () => {
  ElMessage.info('新增BOM功能')
}

const handleEdit = () => {
  ElMessage.info(`编辑BOM：${selectedProduct.value.productCode}`)
}

const handleDelete = () => {
  ElMessage.info(`删除BOM：${selectedProduct.value.productCode}`)
}

const handleProductSelect = (row) => {
  selectedProduct.value = row
  // 模拟加载BOM组件和物流信息
  bomComponents.value = [
    {
      componentCode: 'COMP001',
      componentName: '组件A',
      quantity: 2,
      unit: '个',
      process: '组装'
    },
    {
      componentCode: 'COMP002',
      componentName: '组件B',
      quantity: 1,
      unit: '个',
      process: '焊接'
    }
  ]
  
  logisticsInfo.value = [
    {
      logisticsCode: 'LOG001',
      logisticsName: '采购物流',
      status: '进行中',
      description: '原材料采购运输'
    },
    {
      logisticsCode: 'LOG002',
      logisticsName: '生产物流',
      status: '已完成',
      description: '生产环节物流'
    }
  ]
}

onMounted(() => {
  // 模拟数据
  productList.value = [
    {
      productCode: 'PROD001',
      productName: '产品A',
      specification: '规格1',
      unit: '个'
    },
    {
      productCode: 'PROD002',
      productName: '产品B',
      specification: '规格2',
      unit: '个'
    },
    {
      productCode: 'PROD003',
      productName: '产品C',
      specification: '规格3',
      unit: '个'
    }
  ]
})
</script>

<style scoped>
.production-bom-page {
  padding: 20px;
}

.product-card,
.detail-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.bom-detail {
  padding: 20px 0;
}

.bom-components,
.bom-logistics {
  margin-top: 20px;
}

.bom-components h4,
.bom-logistics h4 {
  margin-bottom: 10px;
  color: #409eff;
}

.no-selection {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
}
</style> 